<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易-导航栏</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      /* 清除列表标志项 */
      list-style: none;
    }

    .container {
      width: 726px;
      height: 8888px;
      background-color: antiquewhite;
      /* 水平居中 */
      margin: 0 auto;

    }



    /* 设置一级菜单 */
    .container ul li {
      background-color: #eee;
      width: 120px;
      /* height: 50px; */
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      /* 变成一行 */
      float: left;
      /* 右侧边框 */
      border-right: 1px solid red;
      position: relative;
    }

    /* .container ul li::after {
      content: "";
      display: block;
      clear: both;
    } */

    /* 设置a标签的颜色 */

    .container ul li a {
      color: rgb(74, 73, 73);
      text-decoration: none;
    }

    /* 伪类选择器 悬浮 */
    .container ul li:hover {
      background-color: rgb(175, 173, 173);
    }

    /* 设置二级菜单隐藏 */
    .container ul li ul {
      /* 因为它不占据位置 */
      display: none;

    }

    /* 设置二级菜单的显示——滑过一级菜单时 设置显示二级菜单 */
    .container ul li:hover ul {
      position: absolute;
      display: block;
    }
  </style>
</head>

<body>
  <div class="container">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">亲自旅游</a></li>

      <li>
        <a href="#">居家生活</a>
        <!-- 二级菜单栏 -->
        <ul>
          <li>样式1</li>
          <li>样式2</li>
          <li>样式3</li>
        </ul>

      </li>
      <li>
        <a href="#">宠物生活</a>
        <!-- 二级菜单栏 -->
        <ul>
          <li>样式1</li>
          <li>样式2</li>
          <li>样式3</li>
        </ul>
      </li>
      <li><a href="#">美食酒水</a></li>
      <li><a href="#">个护清洁</a></li>
    </ul>
    <img src="../项目/image/bg2.jpg" alt="" st>
  </div>

</body>

</html>